<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作当前样式表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 0 auto;
        }
        #btn1 {
            display: block;
            margin: 10px auto;
        }
    </style>
    <script>
        window.onload = function() {
            var box1 = document.getElementById("box1");
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function() {
                // box1.style.backgroundColor = "#ff6700";
                //操作当前已作用的样式表，只对IE有效
                // box1.currentStyle.backgroundColor = "skyblue";
                //操作当前已作用的样式表，对任何浏览器有效
                getComputedStyle(box1,null).backgroundColor;
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div>
    <button id="btn1">更改</button>
</body>
</html>